<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <p>
            <!-- 可以对数字进行遍历 -->
            <span v-for="num in 10"> {{num}} </span>
        </p>
        <p>
            <!-- 可以对字符串进行遍历 -->
            <span v-for="str in '你好世界'"> {{str}} </span>
        </p>
        <p>
            <span v-for="num in numList"> {{num}} </span>
        </p>

        <ul>
            <li v-for="item in proList">
                <h3>{{item.title}}</h3>
                <!-- 可以在遍历的时候获取到其索引值 -->
                <p v-for="(it,index) in item.list"> {{index}} - {{it}} </p>
            </li>
        </ul>

        <div>
            <!-- 遍历对象的时候不能这么写 -->
            <!-- <p v-for="item in user"> -->
            <p v-for="(value,key,index) in user">
                <!-- {{item.name}} -- {{item.age}} -- {{item.sex}} -->
                {{key}} - {{index}} - {{value}}
            </p>
        </div>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                numList: [1, 2, 3, 4, 5],
                user: {
                    name: '张三',
                    age: 18,
                    sex: '男'
                },
                proList: [
                    {
                        title: '遥遥领先',
                        list: [
                            'P40',
                            'P50',
                            'P60'
                        ]
                    }, {
                        title: '小米',
                        list: [
                            'M1',
                            'M2',
                            'M3'
                        ]
                    }, {
                        title: '苹果',
                        list: [
                            '水1',
                            '果2'
                        ]
                    }
                ]
            }
        },
        methods: {},
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>